<template>
  <div class="main-statistics">
    <div class="statistics-allCard" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in statisticsInfo" :key="item.title">
          <div class="statistics-card">
            <div class="statistics-icon">
              <svg-icon :icon-class="item.icon" class="icons" />
            </div>
            <div class="statistics-right">
              <div class="statistics-item"> {{ item.title }}</div>
              <div class="statistics-number">
                {{ item.number }}
                <span class="item-unit">{{ item.unitOne }}</span>
              </div>
              <div class="statistics-item">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="请设置站点设立时间"
                  placement="top"
                  v-if="index === 2 && !item.infoNumber"
                >
                  <el-icon class="icon" color="red"><WarningFilled /></el-icon>
                </el-tooltip>
                {{ item.info }} {{ item.infoNumber?.toLocaleString() }}
                <span class="item-unit">{{ item.unitTwo }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { getSiteGetStatisticsById } from '@/api/controller/site-controller'
  const statisticsInfo = ref<any>([])
  const loading = ref(true)
  const siteId = ref(history.state?.id)
  onMounted(async () => {
    try {
      loading.value = true
      let res = await getSiteGetStatisticsById({ id: siteId.value })
      if (res.code === 200) {
        statisticsInfo.value = [
          {
            title: '累计流水：',
            number: res.data.income,
            unitOne: '元',
            info: '总投入：',
            infoNumber: res.data.input,
            unitTwo: '元',
            icon: 'income',
          },
          {
            title: '累计充电电量：',
            number: res.data.charge,
            unitOne: '度',
            info: '累计充电次数：',
            infoNumber: res.data.chargeCount,
            unitTwo: '次',
            icon: 'charge',
          },
          {
            title: '累计毛利润：',
            number: res.data.grossProfit,
            unitOne: '元',
            info: '预计回报时间：',
            infoNumber: res.data.expectTime,
            icon: 'income',
          },
        ]
      }
    } finally {
      loading.value = false
    }
  })
</script>

<style lang="scss" scoped>
  .main-statistics {
    background-color: white;
    height: 240px;
    padding: 20px 20px 0px 20px;
    .statistics-allCard {
      margin-top: 24px;
      .statistics-card {
        display: flex;
        background-color: white;
        border: soild 1px #dcdfe6;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
        height: 120px;
        margin-bottom: 20px;
        border-radius: 8px;
        padding: 14px;
        .statistics-icon {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-right: 12px;
          .icons {
            height: 24px;
            width: 24px;
          }
        }
        .statistics-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .statistics-item {
            font-size: 18px;
            color: rgb(115, 127, 145);
            .item-unit {
              font-size: 16px;
              color: rgb(115, 127, 145);
            }
          }
          .statistics-number {
            font-size: 26px;
            font-weight: 500;
            .item-unit {
              font-size: 22px;
            }
          }
        }
      }
      .statistics-card:hover {
        box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
      }
    }
  }
</style>
